<script lang="ts" setup>
import { Input } from 'ant-design-vue';

const emit = defineEmits(['blur', 'change']);
const modelValue = defineModel<[string, string]>({
  default: () => [undefined, undefined],
});

function onChange() {
  emit('change', modelValue.value);
}
</script>
<template>
  <div class="center flex w-full gap-1">
    <Input
      v-model:value="modelValue[0]"
      addon-before="0"
      placeholder="如：是"
      :class="{ 'valid-success': !!modelValue[0] }"
      @blur="emit('blur')"
      @change="onChange"
    />
    <span class="pb-1 pl-2 pr-2 pt-1">-</span>
    <Input
      v-model:value="modelValue[1]"
      addon-before="1"
      :class="{ 'valid-success': !!modelValue[1] }"
      placeholder="如：否"
      @blur="emit('blur')"
      @change="onChange"
    />
  </div>
</template>
